<div class="wrapper-comp-settings is-active editor-with-buttons" id="settings-tab">
    <ul class="list-input settings-list">
        <li class="field comp-setting-entry is-set">
            <div class="wrapper-comp-setting">
                <label class="label setting-label" for="display-name">Component Display Name</label>
                <input class="input setting-input" name="display-name" id="display-name" value="{display_name}" type="text" />
            </div>
            <span class="tip setting-help">The name students see. This name appears in the course ribbon and as a header for the video.</span>
        </li>
        
        <li class="field comp-setting-entry is-set">
            <div class="wrapper-comp-setting">
                <label class="label setting-label" for="href">Office Mix URL</label>
                <input class="input setting-input" name="href" id="href" value="{href}" type="text" />
            </div>
            <span class="tip setting-help">The URL for your Office Mix.</span>
        </li>
    </ul>
    <div class="xblock-actions">
        <ul>
            <li class="action-item">
                <a href="#" class="button action-primary save-button">Save</a>
            </li>
            <li class="action-item">
                <a href="#" class="button cancel-button">Cancel</a>
            </li>
        </ul>
    </div>
</div>
